import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import './app-visual-span.less';

/**
 * @description 虚拟表单输入框
 * @export
 * @class AppVisualSpan
 * @extends {Vue}
 */
@Component({})
export class AppVisualSpan extends Vue {
  /**
   * @description 编辑器实列
   * @type {*}
   * @memberof AppVisualSpan
   */
  @Prop() editorInstance!: any;

  /**
   * @description 表单项
   * @type {*}
   * @memberof AppVisualSpan
   */
  @Prop() public parentItem!: any;

  /**
   * @description 编辑器值
   * @type {string}
   * @memberof AppVisualSpan
   */
  @Prop() public value!: string;

  /**
   * @description 编辑器名称
   * @type {string}
   * @memberof AppVisualSpan
   */
  @Prop() public name!: string;

  /**
   * @description 编辑器位置
   * @type {*}
   * @memberof AppVisualSpan
   */
  @Prop() public position!: any;

  /**
   * @description 真实控件
   * @type {string}
   * @memberof AppVisualSpan
   */
  @Prop() realCompRef!: any;

  /**
   * @description 获取当前值
   * @readonly
   * @memberof AppVisualSpan
   */
  get curValue() {
    if (this.realCompRef.codeList && this.realCompRef.$refs.codelist) {
      const items: any[] = this.realCompRef.$refs.codelist.items || [];
      const textSeparator: string = this.realCompRef.$refs.codelist.textSeparator || '、'
      return items.reduce((previous: any, current: any) => {
        return previous.text + textSeparator + current.text;
      })
    } else {
      this.realCompRef.value
    }
  }

  /**
   * @description 绘制组件
   * @return {*}
   * @memberof AppVisualSpan
   */
  public render() {
    return (
      <div
        class={"app-visual-span luckysheet-mousedown-cancel"}
        style={{
          height: `${this.position.height}px`,
          lineHeight: `${this.position.height}px`,
        }}
      >
        <span>{this.curValue}</span>
      </div>
    );
  }
}
